<template>
	<view style="background-color: #f9f8f8;">
		<!-- 选项卡 -->
		<view class="tabs-container">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }"
				@click="switchTab(index)">
				{{ tab.name }}
			</view>
			<image @click="goToPictureOrVideo" class="add-icon" src="/static/images/jiahao.png"></image>
		</view>
		<!-- 全屏视频播放器 -->
		<view class="fullscreen-video" v-if="isFullScreen">
			<video class="fullscreen-video-player" :src="videoItem.videoUrl" :controls="false" autoplay
				show-mute-btn="true" @click="exitFullScreen"></video>
			<!-- 用户头像 -->
			<view class="user-avatar" @click="showHome(videoItem.userInfoId)">
				<image :src="videoItem.headImgUrl || '../../static/images/default_avatar.png'" mode="aspectFill">
				</image>
			</view>
			<!-- 用户名字 -->
			<view class="user-name" @click="showHome(videoItem.userInfoId)">
				{{ videoItem.userName }}
			</view>
			<!-- 车型品牌 -->
			<view class="car-brand">
				<image style="width: 45rpx;height: 45rpx;margin-right: 8px;" src="../../../static/images/xiaocar.png">
				</image> {{ videoItem.secondBrand || '' }}
				{{ videoItem.modelName || '' }} {{ videoItem.carYear || '' }}
			</view>
			<!-- 地址人名 -->
			<view class="city-name">
				#{{ videoItem.city }}
				{{ videoItem.userName }}
			</view>
			<!-- 视频文案 -->
			<view class="video-caption">
				{{ videoItem.shareContent }}
			</view>
		</view>
		<web-view v-if="showVideUrl" :src="webVideUrl"></web-view>
		<scroll-view class="container-scroll" scroll-y="true" :scroll-with-animation="true" @scrolltolower="loadMore">
			<view class="waterfall-container">
				<view class="share-item" v-for="(item, index) in shareList" :key="index">
					<!-- 这里可以添加案例的具体内容 -->
					<view class="video">
						<block v-if="Object.prototype.toString.call(item.imgUrls) === '[object Array]'">
							<image mode="aspectFill" @click="previewImage(item.imgUrls)" :src="item.imgUrls.slice(0, 1)"
								v-if="item.imgUrls"></image>
						</block>
						<block v-else>
							<image mode="aspectFill" @click="previewImage(item.imgUrls)" :src="item.imgUrls"
								v-if="item.imgUrls"></image>
						</block>
						<view class="video-play-icon" :id="item.shareId" v-if="item.videoUrl"
							@click="showVideDetail(item.shareId)">
							<image
								:src="item.frontUrl || 'http://39.108.4.123:8080/sale/./common/getImage?id=group1/M00/00/B8/rBLvXGK9RUiEV1IMAAAAAHq5ry0455.png'"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="caption" @click="showDetail(item.shareId)">
						<text class="caption-text" v-if="item.shareContent.length <= 25">{{ item.shareContent }}</text>
						<text class="caption-text" v-else>{{ item.shareContent.slice(0, 25) }}...</text>
					</view>
					<view class="user-info">
						<view @click="showHome(item.userInfoId)">
							<image class="avatar" :src="item.headImgUrl || '../../static/images/default_avatar.png'"
								mode="aspectFill"></image>
							<text class="username">{{ item.userName }}</text>
						</view>
						<view>
							<image style="width: 15px;height: 15px;" :src="'../../static/images/dianzan.png'"></image>
							<text class="like-count">
								{{ item.handCount }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="loading" class="loading-text">加载中...</view>
	</view>
</template>

<script>
	import {
		getShareList,
		getShareListAll
	} from '@/api/share.js'
	export default {
		data() {
			return {
				activeTab: 0,
				tabs: [{
					name: "推荐"
				}],
				webVideUrl: '',
				showVideUrl: false,
				videoItem: [],
				isFullScreen: false,
				page: 1,
				limit: 20,
				shareList: [],
				loading: false, // 是否正在加载
				hasMore: true // 是否还有更多数据
			}
		},
		onLoad() {
			this.getShareList();
		},
		methods: {
			goToPictureOrVideo() {
				const url = `/pages/commponent/pictureOrvideo`;
				uni.navigateTo({
					url: url,
				});
			},
			switchTab(index) {

			},
			previewImage(imageUrls) {
				// 调用微信小程序的图片预览功能
				uni.previewImage({
					current: imageUrls[0], // 当前显示图片的http链接
					urls: imageUrls, // 需要预览的图片http链接列表
				});
			},
			showVideDetail(shareId) {
				uni.setStorageSync('shareId', shareId)
				const url = `/pages/home/test/showVideDetail`;
				uni.navigateTo({
					url: url,
				});
			},
			showDetail(shareId) {
				const url = `/pages/home/test/showDetail?userInfoId=${shareId}`;
				uni.navigateTo({
					url: url,
				});
			},
			//打开个人主页视图
			showHome(userInfoId) {
				const url = `/pages/home/test/test?userInfoId=${userInfoId}`;
				uni.navigateTo({
					url: url,
				});
			},
			// 退出全屏播放
			exitFullScreen() {
				this.isFullScreen = false;
				// 暂停视频播放
				this.$nextTick(() => {
					const videoContext = uni.createVideoContext('fullscreenVideoPlayer'); // 获取视频上下文
					videoContext.pause(); // 调用暂停方法
				});
			},
			// 进入全屏播放
			enterFullScreen(item) {
				// 暂停当前点击的视频
				const currentVideoContext = uni.createVideoContext(item.shareId + ''); // 获取当前视频的上下文
				currentVideoContext.pause(); // 暂停当前视频
				this.videoItem = item;
				this.isFullScreen = true;
			},
			getShareList() {
				let that = this;
				getShareListAll({
					page: that.page,
					pageSize: that.limit
				}).then(res => {
					if (res.value.list.length === 0) {
						that.hasMore = false; // 如果返回的数据为空，说明没有更多数据了
					} else {
						// 将新数据追加到列表中
						res.value.list.forEach(item => {
							if (item.imgUrls) {
								item.imgUrls = item.imgUrls.split(",");
							}
							if (item.videoUrl) {
								// 如果包含 _t，则去掉 _t
								if (item.videoUrl.includes('_t')) {
									item.videoUrl = item.videoUrl.replace('_t', '');
								}

								// 检查 URL 是否以 http:// 开头，如果是则改为 https://
								if (item.videoUrl.startsWith('http://')) {
									item.videoUrl = item.videoUrl.replace('http://', 'https://');
								}
							}
							that.shareList.push(item);
						});
						that.page++; // 加载下一页
					}
					that.loading = false; // 加载完成，关闭加载状态
				})
			},
			loadMore() {
				if (this.loading || !this.hasMore) return; // 如果正在加载或没有更多数据，直接返回
				this.loading = true; // 开始加载，设置加载状态
				this.getShareList(); // 调用获取数据的方法
			},
		}
	}
</script>

<style>
	.add-icon {
		width: 40rpx;
		/* 根据实际需求调整大小 */
		height: 40rpx;
		position: absolute;
		right: 20px;
		/* 距离右边的距离 */
		top: 50%;
		transform: translateY(-50%);
	}

	/* 选项卡样式 */
	.tabs-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: start;
		padding: 10px 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}

	.tab-item {
		padding: 10px;
		font-size: 16px;
		color: #333;
	}

	.tab-item.active {
		color: black;
		border-bottom: 2px solid #00a128;
	}

	.video-play-icon {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	.video-play-icon::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50rpx;
		height: 50rpx;
		background: url('@/static/images/bofang.png') no-repeat center center / cover;
	}

	.fullscreen-video {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.video-swiper {
		width: 100%;
		height: 100%;
	}

	.fullscreen-video-player {
		width: 100%;
		height: 100%;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.user-avatar {
		position: absolute;
		bottom: 40rpx;
		left: 40rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.video-caption {
		position: absolute;
		bottom: 240rpx;
		left: 30rpx;
		color: #ffffff;
		font-weight: 600;
		font-size: 40rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		width: 600rpx;
		/* 设置一个宽度限制 */
		white-space: nowrap;
		/* 防止内容换行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
	}

	.city-name {
		position: absolute;
		bottom: 300rpx;
		left: 30rpx;
		color: #ffffff;
		font-weight: 600;
		font-size: 40rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.car-brand {
		position: absolute;
		bottom: 375rpx;
		left: 30rpx;
		color: #ffffff;
		font-size: 30rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		background-color: green;
	}

	.user-name {
		position: absolute;
		bottom: 60rpx;
		left: 140rpx;
		/* 根据头像的宽度调整 */
		color: #ffffff;
		font-size: 40rpx;
		font-weight: 600;
	}

	.container-scroll {
		width: 100%;
		height: 100vh;
	}

	.waterfall-container {
		column-count: 2;
		column-gap: 10px;
	}

	.share-item {
		break-inside: avoid;
		margin-bottom: 10px;
		background-color: white;
		border-radius: 5px;
		text-align: center;
	}

	.video {
		position: relative;
	}

	.video video {
		width: 100%;
	}

	.caption {
		padding: 10px;
		text-align: left;
	}

	.caption-text {
		font-size: 14px;
		color: #333;
		word-wrap: break-word;
	}

	.user-info {
		display: flex;
		align-items: center;
		padding: 0px 10px;
		justify-content: space-between;
		font-size: 12px;
	}

	.avatar {
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.username {
		padding: 0px 10px;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.like-count {
		width: 40px;
		/* 设置赞的固定宽度 */
		text-align: center;
		/* 让赞的文本居中 */
	}

	.loading-text {
		text-align: center;
		padding: 10px;
		font-size: 14px;
		color: #999;
	}
</style>